<template>
  <!-- 好书慢读组件 -->
  <!-- 当前在更 -->
  <section class="up-date">
    <p>U P D A T E</p>
    <h2>当前在更</h2>
    <div class="up-date-div" v-for="value of upDateList" :key="value.title">
      <img :src="value.imgUrl" alt="" />
      <div class="title-describe">
        <p>{{ value.title }}</p>
        <p>{{ value.describe }}</p>
        <span>{{ value.sketch }}</span>
      </div>
    </div>
  </section>
  <!-- 编辑推荐 -->
  <section class="recommend">
    <p>RECOMMEND</p>
    <h2>编辑推荐</h2>
    <div class="up-date-div" v-for="value of recommendList" :key="value.title">
      <img :src="value.imgUrl" alt="" />
      <div class="title-describe">
        <p>{{ value.title }}</p>
        <p>{{ value.describe }}</p>
        <span>{{ value.sketch }}</span>
        <span>{{ value.pitch }}</span>
      </div>
    </div>
  </section>
  <!-- 今日限免 -->
  <section class="free-today">
    <p>FREEBOOK</p>
    <h2>今日限免</h2>
    <div
      class="free-today-div"
      v-for="value of freeTodayList"
      :key="value.title"
    >
      <div class="left">
        <p>{{ value.title }}</p>
        <p>{{ value.name }}</p>
        <span>{{ value.describe }}</span>
      </div>
      <img :src="value.imgUrl" alt="" />
    </div>
  </section>
  <!-- 李蕾邀你参加 -->
  <section class="lilei-invite-you">
    <p>INVITATION</p>
    <h2>李蕾邀你参加</h2>
    <div>
      <img src="@/assets/images/李蕾慢读/图层7@2x.png" alt="" />
    </div>
  </section>
  <!-- 你好么? 我是李蕾 -->
  <section class="how-are-you-lilei">
    <p>M Y N A M E I S L I L E</p>
    <h2>你好么? 我是李蕾</h2>
  </section>
  <!-- 李蕾是谁？ -->
  <section class="who-is-lilei">
    <div class="lilei-is-who">李蕾是谁？</div>
    <figure>
      <img src="@/assets/images/李蕾慢读/图层8@2x.png" alt="" />
    </figure>
    <!-- 签约老师 -->
    <div class="teacher-signed">
      樊登读书app
      <span>独家签约老师</span>
      ，李蕾慢读首部讲书《断舍离》上线三个月，播放量
      <span>70万+</span>
      ，好评如潮。首部线上声音剧《浮生六记》播放量
      <span>80万+</span>
      ，并走进线下空间，深受听众喜爱。
    </div>
    <!-- 音剧现场 -->
    <div class="sound-play">
      <img src="@/assets/images/李蕾慢读/图层9@2x.png" alt="" />
    </div>
    <p class="music-site">《浮生六记》线下声音剧现场</p>
    <!-- 畅销书作家 -->
    <div class="bestselling-author">
      <h3>畅销书作家</h3>
      <div class="publish">
        已出版各类作品9本，其中半自传长 篇小说处女作《藏地情人》出版后， 立刻
        <span>引起文化界的巨大关注。</span>
      </div>
      <ul>
        <li>
          <img src="@/assets/images/李蕾慢读/图层16@2x.png" alt="" />
        </li>
        <li>
          <img src="@/assets/images/李蕾慢读/图层17@2x.png" alt="" />
        </li>
        <li>
          <img src="@/assets/images/李蕾慢读/图层18@2x.png" alt="" />
        </li>
      </ul>
      <p>部分作品展示</p>
    </div>
    <!-- 知名谈话节目主持人 -->
    <div class="compere">
      <h3>知名谈话节目主持人</h3>
      <div class="publish">
        先后担任陕西电视台《开坛》、上海纪实频道《风言锋语》、中央电视台综合频道《1起聊聊》等栏目主持人，
        <span>15年电视主持经验，20年媒体从业经历，</span>
        多次获奖。
      </div>
      <ul>
        <li v-for="value of compere" :key="value.title">
          <img :src="value.imgUrl" alt="" />
          <p>{{ value.title }}</p>
          <span>{{ value.people }}</span>
        </li>
      </ul>
    </div>
  </section>
</template>

<script>
import { onMounted, computed } from "vue";
import { useStore } from "vuex";
export default {
  setup() {
    const store = useStore();
    onMounted(() => {
      getUpDateList();
      getRecommendList();
      getFreeTodayList();
      getCompere();
    });
    // 当前在更列表
    const getUpDateList = () => store.dispatch("getUpDateList");
    const upDateList = computed(
      () => store.state.slowTell.getUpDateList.result
    );
    // 编辑推荐列表
    const getRecommendList = () => store.dispatch("getRecommendList");
    const recommendList = computed(
      () => store.state.slowTell.getRecommendList.result
    );
    // 今日限免列表
    const getFreeTodayList = () => store.dispatch("getFreeTodayList");
    const freeTodayList = computed(
      () => store.state.slowTell.getFreeTodayList.result
    );
    // 知名谈话节目主持人列表
    const getCompere = () => store.dispatch("getCompere");
    const compere = computed(() => store.state.slowTell.getCompere.result);

    return {
      upDateList,
      recommendList,
      freeTodayList,
      compere,
      getUpDateList,
      getRecommendList,
      getFreeTodayList,
    };
  },
};
</script>

<style lang="less" scoped>
// 当前在更
.up-date {
  margin: 0;
  margin-bottom: 25px;
  padding: 0 25px;
  p {
    color: #c8ced5;
    font-size: 9px;
    font-family: PingFang SC;
    margin-bottom: 7px;
  }
  h2 {
    margin: 0;
    margin-bottom: 15px;
    font-size: 17px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #0c264b;
  }
  .up-date-div {
    display: flex;
    align-items: center;
    img {
      width: 85px;
      height: 111px;
      margin-right: 12px;
    }
    .title-describe {
      height: 111px;
      position: relative;
      p {
        font-family: PingFang SC;
        font-weight: bold;
        &:first-of-type {
          font-size: 15px;
          color: #152844;
        }
        &:nth-of-type(2) {
          color: #929ba4;
          font-size: 12px;
        }
      }
      span {
        position: absolute;
        bottom: 6px;
        background-color: #ebf8ff;
        border-radius: 11px;
        height: 21px;
        line-height: 21px;
        text-align: center;
        padding: 0 8px;
        font-size: 11px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #414e5f;
      }
    }
  }
}
// 编辑推荐
.recommend {
  margin: 0;
  margin-bottom: 37px;
  padding: 0 25px;
  p {
    color: #c8ced5;
    font-size: 9px;
    font-family: PingFang SC;
    margin-bottom: 7px;
  }
  h2 {
    margin: 0;
    margin-bottom: 15px;
    font-size: 17px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #0c264b;
  }
  .up-date-div {
    margin-bottom: 13px;
    display: flex;
    align-items: center;
    img {
      width: 85px;
      height: 111px;
      margin-right: 12px;
    }
    .title-describe {
      height: 111px;
      position: relative;
      flex: 1;
      p {
        margin: 0;
        font-family: PingFang SC;
        font-weight: bold;
        &:first-of-type {
          font-size: 15px;
          color: #152844;
          margin-bottom: 10px;
        }
        &:nth-of-type(2) {
          color: #929ba4;
          font-size: 12px;
        }
      }
      span {
        position: absolute;
        font-size: 11px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #414e5f;
        &:first-of-type {
          bottom: 6px;
          background-color: #ebf8ff;
          border-radius: 11px;
          height: 21px;
          line-height: 21px;
          text-align: center;
          padding: 0 8px;
        }
        &:last-of-type {
          right: 0;
          bottom: 10px;
          color: #213858;
          font-size: 10px;
        }
      }
    }
  }
}
// 今日限免
.free-today {
  margin: 0;
  margin-bottom: 25px;
  padding: 0 25px;
  p {
    color: #c8ced5;
    font-size: 9px;
    font-family: PingFang SC;
    margin-bottom: 7px;
  }
  h2 {
    margin: 0;
    margin-bottom: 15px;
    font-size: 17px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #0c264b;
  }
  .free-today-div {
    width: 318px;
    height: 134px;
    background: #ffffff;
    box-shadow: 0px 0px 1px 0px rgba(105, 105, 105, 0.8);
    border-radius: 9px;
    padding: 6px 4px 4px 13px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    .left {
      margin-right: 11px;
      flex: 1;
      position: relative;
      display: flex;
      flex-direction: column;
      height: 100%;
      p {
        margin: 0;
        font-family: PingFang SC;
        font-weight: bold;
        &:first-of-type {
          color: #14284a;
          font-size: 14px;
          margin-bottom: 9px;
        }
        &:last-of-type {
          font-size: 11px;
          color: #879198;
        }
      }
      span {
        position: absolute;
        font-size: 11px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #606e76;
        padding: 0 8px;
        border-radius: 9px;
        background: #f3fbfe;
        bottom: 7px;
      }
    }
    img {
      width: 99px;
      height: 122px;
    }
  }
}
// 李蕾邀你参加
.lilei-invite-you {
  margin: 0;
  margin-bottom: 50px;
  padding: 0 25px;
  p {
    color: #c8ced5;
    font-size: 9px;
    font-family: PingFang SC;
    margin-bottom: 7px;
  }
  h2 {
    margin: 0;
    margin-bottom: 20px;
    font-size: 17px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #0c264b;
  }
  div {
    width: 313px;
    height: 101px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
// 你好么? 我是李蕾
.how-are-you-lilei {
  margin: 0;
  padding: 0 25px;
  p {
    color: #c8ced5;
    font-size: 9px;
    font-family: PingFang SC;
    margin-bottom: 7px;
  }
  h2 {
    margin: 0;
    margin-bottom: 35px;
    font-size: 17px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #0c264b;
  }
}
// 李蕾是谁？
.who-is-lilei {
  .lilei-is-who {
    width: 122px;
    height: 34px;
    background: #201d0f;
    border-radius: 17px;
    position: relative;
    margin: 0 auto;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #ffffff;
    line-height: 34px;
    text-align: center;
    &::after {
      position: absolute;
      content: "";
      width: 0;
      height: 0;
      left: 50%;
      transform: translateX(-50%);
      bottom: -15px;
      border-right: 8px solid transparent;
      border-top: 8px solid #201d0f;
      border-bottom: 8px solid transparent;
      border-left: 8px solid transparent;
    }
  }
  figure {
    margin: 0;
    width: 100%;
    height: 292px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  // 签约老师
  .teacher-signed {
    width: 315px;
    background: #f6d98d;
    border-radius: 9px;
    margin: 0 auto;
    padding: 18px;
    box-sizing: border-box;
    line-height: 25px;
    margin-bottom: 22px;
    color: #2e1b00;
    font-size: 15px;
    span {
      color: #e59136;
    }
  }
  // 音剧现场
  .sound-play {
    width: 247px;
    height: 165px;
    margin: 0 auto;
    margin-bottom: 10px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .music-site {
    text-align: center;
    margin-bottom: 40px;
    font-size: 8px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #a9a9a9;
  }
  // 畅销书作家
  .bestselling-author {
    h3 {
      font-size: 17px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #1d1c15;
      text-align: center;
      margin: 0;
      margin-bottom: 17px;
    }
    .publish {
      width: 316px;
      background: #f6d98d;
      border-radius: 10px;
      padding: 16px;
      margin: 0 auto;
      margin-bottom: 28px;
      color: #2e1b00;
      font-family: PingFang SC;
      font-size: 15px;
      line-height: 30px;
      span {
        color: #e59136;
      }
    }
    ul {
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin-bottom: 10px;
      li {
        width: 74px;
        height: 112px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    p {
      color: #a9a9a9;
      text-align: center;
      font-size: 8px;
      font-family: PingFang SC;
      font-weight: bold;
      margin: 0;
      margin-bottom: 39px;
    }
  }
  // 知名谈话节目主持人
  .compere {
    margin-bottom: 50px;
    h3 {
      font-size: 17px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #1d1c15;
      text-align: center;
      margin: 0;
      margin-bottom: 17px;
    }
    .publish {
      width: 316px;
      background: #f6d98d;
      border-radius: 10px;
      padding: 16px;
      margin: 0 auto;
      margin-bottom: 29px;
      color: #2e1b00;
      font-family: PingFang SC;
      font-size: 15px;
      line-height: 29px;
      span {
        color: #e59136;
      }
    }
    ul {
      padding: 0 28px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      align-items: center;
      margin-bottom: 16px;
      li {
        display: flex;
        align-items: center;
        flex-direction: column;
        margin-bottom: 15px;
        img {
          width: 151px;
          height: 101px;
          margin-bottom: 11px;
        }
        p {
          font-size: 10px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #3d3e39;
          margin: 0;
          margin-bottom: 7px;
        }
        span {
          font-size: 8px;
          color: #a9a9a9;
        }
      }
    }
  }
}
</style>
